<template>
    <div v-loading="loading">
        <div class="container_box"
             style="padding-bottom:0;">
            <el-button type="primary"
                       @click="$router.go(-1)">返回</el-button>
            <div class="merchant_box u-flex u-row-between">
                <div class="u-flex u-col-center">
                    <el-avatar class="merchant_logo"
                               :size="80"
                               :src="userInfo.icon">
                        <img src="@/common/mine_tx_nor.png" />
                    </el-avatar>
                    <span style="margin-right: 15px">{{ userInfo.name }}</span>

                </div>
            </div>
            <el-tabs v-model="tabType">
                <el-tab-pane label="用户信息"
                             name="user"></el-tab-pane>
                <el-tab-pane label="访问记录"
                             name="order"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="padding_box">
            <div v-show="tabType =='user'">
                <el-row :gutter="24">
                    <el-col :span="6"
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="8"
                            :xl="8">
                        <el-card shadow="hover">
                            <p><span class="top-card-title">总停留时长</span> <span class="top-card-title2">单位：秒</span></p>
                            <div class="top-card-footer u-flex u-row-between">
                                <img class="top-card-img"
                                     src="@/assets/img/home/sy_icon_sjzs@2x.png">
                                <div class="progress-box u-flex-col"
                                     style="flex:unset;">
                                    {{ userInfo.stayTime || 0 }}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6"
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="8"
                            :xl="8">
                        <el-card shadow="hover">
                            <p><span class="top-card-title">视频总压缩数</span> <span class="top-card-title2">单位：个</span></p>
                            <div class="top-card-footer u-flex u-row-between">
                                <img class="top-card-img"
                                     src="@/assets/img/home/sy_icon_ddsl@2x.png">
                                <div class="progress-box u-flex-col"
                                     style="flex:unset;">
                                    {{ userInfo.videoCount || 0 }}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6"
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="8"
                            :xl="8">
                        <el-card shadow="hover">
                            <p><span class="top-card-title">图片总压缩数</span> <span class="top-card-title2">单位：个</span></p>
                            <div class="top-card-footer u-flex u-row-between">
                                <img class="top-card-img"
                                     src="@/assets/img/home/sy_icon_ddsl@2x.png">
                                <div class="progress-box u-flex-col"
                                     style="flex:unset;">
                                    {{ userInfo.pictureCount || 0 }}
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <div class="container_box"
                     style="margin-top:30px;">
                    <div class="order_title">基本信息</div>
                    <el-divider></el-divider>

                    <t-table>
                        <t-tr>
                            <t-td>用户名</t-td>
                            <t-td>联系方式</t-td>
                            <t-td>性别</t-td>
                            <t-td>出生日期</t-td>
                        </t-tr>
                        <t-tr>
                            <t-td>{{ userInfo.name }}</t-td>
                            <t-td>{{ userInfo.phone  }}</t-td>
                            <t-td>{{ userInfo.sex == 1 ? '男':'女' }}</t-td>
                            <t-td>{{ userInfo.birthDate }}</t-td>
                        </t-tr>
                        <t-tr>
                            <t-td>wifiID </t-td>
                            <t-td>设备号</t-td>
                            <t-td></t-td>
                            <t-td></t-td>
                        </t-tr>
                        <t-tr>
                            <t-td>{{ userInfo.ssid }}</t-td>
                            <t-td>{{ userInfo.imei }}</t-td>
                            <t-td></t-td>
                            <t-td></t-td>
                        </t-tr>
                    </t-table>
                </div>

            </div>
            <div v-show="tabType == 'order'">
                <el-table ref="multipleTable"
                          class="my_table"
                          header-row-class-name="order_header"
                          :data="tableData"
                          tooltip-effect="dark"
                          style="width: 100%">
                    <el-table-column label="访问模块"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.type | XnameFilter}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdDate"
                                     label="开始时间"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="residenceTime"
                                     label="停留时长"
                                     align="center">
                    </el-table-column>
                </el-table>
                <el-pagination style="text-align: right;"
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="queryData.pageNum"
                               :page-size="queryData.pageSize"
                               :page-sizes="[5, 10, 20, 40]"
                               :total="pageTotal"
                               layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>

        </div>
    </div>
    <!-- </div> -->
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue';
import tTable from '@/components/t-table/t-table.vue';
import tTh from '@/components/t-table/t-td.vue';
import tTr from '@/components/t-table/t-tr.vue';
import tTd from '@/components/t-table/t-td.vue';
export default {
    components: {
        tTable,
        tTh,
        tTr,
        tTd,
        businessCard
    },
    data: function () {
        return {
            tabType: 'user',
            userInfo: {
                memberNameCard: {

                },
            },

            queryData: {
                userId: this.$route.query.userId,
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            loading: true,
            pageTotal: 0,
            tableWidth: '',     // 商品列表宽度
        };
    },
    watch: {

    },
    computed: {

    },
    filters: {
        XnameFilter(type) {
            switch (type) {
                case 1:
                    return '手动压缩'
                case 2:
                    return '私密空间'
                case 3:
                    return '互利共享'
                case 4:
                    return '魔法放大'
                case 5:
                    return '功能设置'
            }
        },
    },
    methods: {
        getUserData() {
            let _this = this
            let data = { userId: this.$route.query.userId }
            // 获取用户信息
            axios({
                url: "/user/infoUser",
                method: "post",
                data
            }).then(res => {
                const { result } = res;
                _this.userInfo = result
                this.userInfo.stayTime = 0
                _this.tableData = result.residenceTimeStatisticsList
                result.residenceTimeStatisticsList.forEach(ele => {
                    this.userInfo.stayTime += ele.residenceTime
                });
                _this.loading = false;
            }).catch(err => {
                _this.loading = false;
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
    },
    activated() {

    },
    created() {
        this.getUserData()
        // this.getTableData(``)
    }

};
</script>
<style lang="scss" scoped>
::v-deep {
    .el-tabs__header {
        margin: 0;
    }
    .el-tabs__item {
        color: #999;
        &.is-active {
            color: #1b93f8;
        }
    }
    .el-tabs__nav-wrap::after {
        height: 0;
    }
}

.merchant_box {
    margin: 25px 0;
    .merchant_logo {
        margin-right: 15px;
    }
    .item_box {
        height: 80px;
        margin-top: 20px;
        justify-content: space-around;
    }
    .title {
        font-size: 16px;
        color: #999;
    }
    .title2 {
        color: #333;
        font-weight: bold;
    }
}
.t-table {
    margin: 15px 0 20px 0;
}
.merchant-img {
    width: 256px;
    height: 180px;
    border-radius: 8px;
    margin: 0 24px 24px 0;
}
.top-card-title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
}
.top-card-title2 {
    margin-left: 10px;
    font-size: 12px;
    color: #999;
}
.top-card-footer {
    margin-top: 25px;
    .top-card-img {
        margin-right: 15px;
        width: 56px;
        height: 56px;
    }
    .progress-box {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        flex: 1;
        p {
            font-size: 14px;
            color: #333;
            margin: 3px 0;
            span:nth-of-type(2) {
                float: right;
            }
        }
        p:nth-of-type(2) {
            margin-top: 10px;
        }
    }
}
</style>
<style lang="scss">
</style>